<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>商品详情</title>
    <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<input type="hidden" id="seckillGoodsId" th:value="${id}"/>
<table class="table">
    <caption>秒杀商品详情</caption>
    <tr>
        <td>商品名称</td>
        <td id="goodsName"></td>
    </tr>
    <tr>
        <td>商品图片</td>
        <td><img id="goodsImg" style="height:150px;" src=""/></td>
    </tr>
    <tr>
        <td>秒杀开始时间</td>
        <td id="startTime"></td>
    </tr>
    <tr>
        <td>秒杀结束时间</td>
        <td id="endTime"></td>
    </tr>
    <tr>
        <td>操作</td>
        <td id="handle"><a href="#">立即秒杀</a></td>
    </tr>
</table>

</body>

<script>
    $(function () {
        var htmlStr = "";
        $.ajax({
            type: 'GET',
            url: "seckillGoods/findById?id=" + $("#seckillGoodsId").val(),
            success: function (data, status) {
                console.log("data:", data);
                $("#goodsName").html(data.result.goodsName);
                $("#goodsImg").attr("src", data.result.goodsImg);
                $("#startTime").html(data.result.startTime);
                $("#endTime").html(data.result.endTime);
            }
        });
    })
</script>
</html>